$themes: (
    light: (
        font_color1: #03091B, //消息名称名字
        font_color2: #030819, //对方输入文字
        font_color3: #ffffff, //聊天自己输入的文字
        font_color4: #888888, //聊天名字
        font_color5: #11D6BB, //切换选中文字
        font_color6: #81838D, //切换未选中文字
        font_color7: #ffffff, //头部文字颜色
        font_color8: #ffffff, //左右文字颜色
        font_color9: #888888, //消息文字
        font_color10: #989EB4, //功能按钮文字
        font_color11: #333333, //输入文字
        font_color12: #5D5D5D, //搜索文字

        background_color1: #ffffff,  //对方聊天框背景
        background_color2: #11D6BB, //自己聊天框背景
        background_color3: #F4F5F9, //聊天背景
        background_color4: #11D6BB, //头部背景
        background_color5: #ffffff, //底部背景
        background_color6: #11D6BB, //按钮背景
        background_color7: #ffffff, //输入框背景
        background_color8: #F4F5FA, //搜索框背景

        border_color1: #eeeeee, //边框颜色
        border_color2: #eeeeee, //边框颜色
    ),
    dark: (
        font_color1: #ffffff, //消息名称名字
        font_color2: #ffffff, //对方输入文字
        font_color3: #ffffff, //聊天自己输入的文字
        font_color4: #656565, //聊天名字
        font_color5: #11D6BB, //切换文字颜色
        font_color6: #8C8B91, //切换未选中文字
        font_color7: #ffffff, //头部文字颜色
        font_color8: #8D8C92, //左右文字颜色
        font_color9: #8D8C92, //消息文字
        font_color10: #8E8D93, //功能按钮文字
        font_color11: #ffffff, //输入文字
        font_color12: #B0B2BE, //搜索文字

        background_color1: #232323, //对方聊天框背景
        background_color2: #232323, //自己聊天框背景
        background_color3: #000000, //聊天背景
        background_color4: #000000, //头部背景
        background_color5: #000000, //底部背景
        background_color6: #11D6BB, //按钮背景
        background_color7: #1C1C1C, //输入框背景
        background_color8: #1E1E1E, //搜索框背景

        border_color1: #000000, //边框颜色
        border_color2: #eeeeee, //边框颜色
    )
);

@mixin themeify {
    @each $theme-name, $theme-map in $themes {
        $theme-map: $theme-map !global;
        [data-theme="#{$theme-name}"] & {
            @content;
        }
    }
}

@function themed($key) {
    @return map-get($theme-map, $key);
}

@mixin font_color($color) {
    @include themeify {
        color: themed($color)!important;
    }
}

@mixin background_color($color) {
    @include themeify {
        background-color: themed($color)!important;
    }
}

@mixin border_color($color) {
    @include themeify {
        border-color: themed($color)!important;
    }
}